<template>
  <view class="container">
    <view class="card">
      <u-form
        labelPosition="left"
        :model="addressInfo"
        :rules="rules"
        ref="form1"
      >
        <u-form-item label="姓名" prop="name" borderBottom>
          <u-input
            v-model="addressInfo.name"
            border="none"
            placeholder="请输入收货人姓名"
          ></u-input>
        </u-form-item>
        <u-form-item label="电话" prop="phone" borderBottom>
          <u-input
            v-model="addressInfo.phone"
            border="none"
            placeholder="请输入收货人手机号"
          ></u-input>
        </u-form-item>
        <u-form-item label="地区" prop="area" borderBottom>
          <u-input
            v-model="addressInfo.area"
            border="none"
            placeholder="输入省/市区"
          ></u-input>
        </u-form-item>
        <u-form-item label="详细地址" prop="detail_address">
          <u-input
            v-model="addressInfo.detail_address"
            border="none"
            placeholder="街道门牌、楼层信息"
          ></u-input>
        </u-form-item>
      </u-form>
    </view>
    <view style="margin-top: 60rpx">
      <m-button @clickHandle="save">保存</m-button>
    </view>
  </view>
</template>
<script>
import { mapGetters } from "vuex";
import Button from "@/components/Button/index";
import { getAddressDetail } from "@/api/Home/index";
import { updateAddress, increaseAddress } from "@/api/Home/index";

export default {
  name: "increase-address",
  data() {
    return {
      addressInfo: {
        name: "",
        phone: "",
        area: "",
        detail_address: "",
      },
      addressId: "",
      rules: {
        name: {
          type: "string",
          required: true,
          message: "请填写姓名",
          trigger: ["blur", "change"],
        },
        phone: {
          type: "string",
          required: true,
          message: "请填写联系方式",
          trigger: ["blur", "change"],
        },
        detail_address: {
          type: "string",
          required: true,
          message: "请填写详细地址",
          trigger: ["blur", "change"],
        },
        area: {
          type: "string",
          required: true,
          message: "请填写所属区域",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  components: {
    "m-button": Button,
  },
  computed: {
    ...mapGetters(["openId"]),
  },
  methods: {
    save() {
      this.$refs.form1
        .validate()
        .then((result) => {
          uni.showLoading({
            title: "提交地址信息中!",
          });
          if (this.addressId) {
            updateAddress(this.addressId, this.addressInfo)
              .then((result) => {
                uni.showToast({
                  title: "修改成功!",
                  icon: "success",
                  duration: 2000,
                });
                uni.hideLoading();
                uni.redirectTo({
                  url: "/pages/address/index",
                });
              })
              .catch((err) => {
                uni.showToast({
                  title: "修改失败!",
                  icon: "error",
                  duration: 2000,
                });
                uni.hideLoading();
              });
          } else {
            increaseAddress(this.openId, this.addressInfo)
              .then((result) => {
                uni.showToast({
                  title: "添加成功!",
                  icon: "success",
                  duration: 2000,
                });
                uni.hideLoading();
                uni.redirectTo({
                  url: "/pages/address/index",
                });
              })
              .catch((err) => {
                console.log(err);
                uni.showToast({
                  title: "添加失败!",
                  icon: "error",
                  duration: 2000,
                });
                uni.hideLoading();
              });
          }
          
        })
        .catch((err) => {
          uni.$u.toast("校验失败");
        });
    },
    getAddress() {
      getAddressDetail(this.addressId)
        .then((result) => {
          const { name, phone, area, detailAddress } = result.data;
          this.addressInfo.name = name;
          this.addressInfo.phone = phone;
          this.addressInfo.area = area;
          this.addressInfo.detail_address = detailAddress;
        })
        .catch((err) => {});
    },
  },
  onLoad(option) {
    const { addressId } = option;
    if (!addressId || typeof addressId == "undefined") {
      uni.setNavigationBarTitle({
        title: "新增收货地址",
      });
      return;
    }
    uni.setNavigationBarTitle({
      title: "修改收货地址",
    });
    this.addressId = addressId;
    this.getAddress();
  },
};
</script>
<style lang="scss">
.container {
  background-color: #f6f6f6;
  padding: 20rpx;
  position: relative;
  flex: 1;
  height: 100%;

  .card {
    padding: 35rpx 37rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>
